<template>
  <div class="wrapper">
    <div class="box">
      <GoBack class="mb24" back-title="服务组" :title="`${isEdit ? '编辑' : '新建'}服务组`" />
      <div>
        <section class="item section-title">产品信息</section>
        <el-form scroll-to-error ref="formRef" :rules="rules" label-position="top" :model="product" label-width="120px">
          <section class="item flex">
            <div v-if="product.groupNumber" style="width: calc(50% - 5px)">
              <p class="item-title">服务组编号</p>
              <el-input disabled v-model.trim="product.groupNumber"></el-input>
            </div>
            <div :style="groupNameStyle">
              <el-form-item prop="name" label="服务组名称">
                <el-input placeholder="请输入" v-model.trim="product.name" maxlength="50" show-word-limit></el-input>
              </el-form-item>
            </div>
          </section>
          <section class="item">
            <el-form-item prop="principal.model">
              <template #label>
                <span class="only-flex no-l-padding">
                  <span class="el-form-item__label no-l-padding">负责人</span>
                  <el-tooltip
                    :show-after="500"
                    placement="top"
                    content="负责人不会被分配到服务组的业务，如通话，工单，适用于客服主管，小组长，质检员等；如需要处理业务需要把员工加入到组内成员中"
                  >
                    <i class="tip-icon MC_iconfont MC_icon-xinxi-line"></i>
                  </el-tooltip>
                </span>
              </template>
              <el-select-v2
                v-model="product.principal.model"
                :options="product.principal.options"
                placeholder="请选择负责人"
                collapse-tags
                collapse-tags-tooltip
                multiple
                filterable
                :reserve-keyword="false"
                style="width: 50%"
                value-key="_id"
              >
                <template #default="{ item }">
                  <span>{{ `${item.agentName} [${item.agentNumber}]` }}</span>
                </template>
              </el-select-v2>
            </el-form-item>
          </section>
          <section v-if="isEmpty(product.children)" class="item">
            <p class="item-title">组内成员</p>
            <el-transfer
              class="transfer"
              @change="onTransfer"
              filterable
              filter-placeholder="搜索姓名/工号"
              :filter-method="filterMethod"
              :button-texts="['移出服务组', '移入服务组']"
              :titles="['座席列表', '组内成员']"
              v-model="product.group.model"
              :data="product.group.options"
              :props="{ key: '_id', label: 'name' }"
            >
              <template #default="{ option }">
                <el-tooltip :show-after="500" placement="top" :content="`${option.agentName} [${option.agentNumber}]`">
                  <span class="transfer-label">{{ `${option.agentName} [${option.agentNumber}]` }}</span>
                </el-tooltip>
                <el-input
                  v-int
                  min="0"
                  v-show="option.isRight"
                  v-model.trim="option.weight"
                  class="weight"
                  size="small"
                />
              </template>
            </el-transfer>
          </section>
        </el-form>
      </div>
      <div class="item item-box">
        <section class="item section-title">业务信息</section>
        <section class="item">
          <el-menu mode="horizontal" :default-active="activeIndex">
            <el-menu-item index="0">呼叫中心</el-menu-item>
          </el-menu>
          <div class="call-center-wrapper">
            <div v-if="activeIndex === '0'" class="call-center">
              <div class="card flex-col">
                <div>
                  <p class="card-title">分配策略</p>
                  <p class="card-txt noBM">
                    用于系统客户呼入或自动外呼客户接听后转入服务组进行分配时，分配给员工的策略规则
                  </p>
                </div>
                <div class="dividing"></div>
                <div>
                  <el-radio-group class="radio-group" v-model="allocationStrategy">
                    <el-radio :label="Strategy.ZERO">
                      <span>轮选</span>
                      <span class="card-txt">按照服务组内员工登录客服工作台的顺序依次分配给空闲员工</span>
                    </el-radio>
                    <el-radio :label="Strategy.ONE">
                      <span>顺序</span>
                      <span class="card-txt"
                        >按照服务组内员工工号由小到大配分给空闲员工，每次会优先分配给顺序最高的空闲员工</span
                      >
                    </el-radio>
                    <el-radio :label="Strategy.TWO">
                      <span>随机</span>
                      <span class="card-txt">对服务组内空闲员工随机分配，呼叫量较大的情况下接近平均分配</span>
                    </el-radio>
                    <el-radio :label="Strategy.THREE">
                      <span>技能值</span>
                      <span class="card-txt"
                        >对照服务组内座席技能值由大到小分配给空闲员工，技能值相同时随机选择空闲员工</span
                      >
                    </el-radio>
                    <el-radio :label="Strategy.FOUR">
                      <span>最长空闲时间</span>
                      <span class="card-txt"
                        >优先分配服务组内距离上一通通话结束后空闲时间最长的空闲员工，每自然日重新计算</span
                      >
                    </el-radio>
                    <el-radio :label="Strategy.FIVE">
                      <span>最小接听次数</span>
                      <span class="card-txt">优先分配给服务组内来电接听次数最少的空闲员工，每自然日重新计算</span>
                    </el-radio>
                    <el-radio :label="Strategy.SIX">
                      <span>距离接听最长时间</span>
                      <span class="card-txt">优先分配给距离接听上一通来电时间最长的空闲员工，每自然日重新计算</span>
                    </el-radio>
                  </el-radio-group>
                </div>
              </div>
              <div class="card">
                <div>
                  <p class="card-title">无空闲员工立刻溢出</p>
                  <p class="card-txt">
                    服务组内所有员工均处于未登录、置忙、通话中、振铃等状态时，来电不再排队等待直接溢出当前服务组。溢出后的流转可以在IVR语音导航—转人工节点的“无效”中配置。
                  </p>
                </div>
                <el-switch size="small" v-model="noFreeStaff" />
              </div>
              <div class="card flex">
                <div>
                  <p class="card-title">最大排队数</p>
                  <p class="card-txt">
                    服务组队列内最大呼叫排队数量，包括客户呼入或者自动外呼客户接听后转入服务组的数量。可设置0-99的整数数字，0为不限制排队数，建议设置为服务组人员的1-2倍范围内。超过此数值的益处规则，可在IVR语音导航-转人工节点的“超量”中配置。
                  </p>
                </div>
                <el-input-number
                  class="tal"
                  style="width: 265px"
                  :controls="false"
                  v-int
                  v-model="maxNumQueue"
                  :min="0"
                  :max="99"
                  controls-position="right"
                  size="middle"
                />
              </div>
              <div class="card">
                <div>
                  <p class="card-title">最长排队时间</p>
                  <p class="card-txt">
                    服务组队列内排队的最大时长，建议设置为员工振铃时长的2-3倍。超过此数值的溢出规则。可在IVR语音导航-转人工节点的“超时”中配置。
                  </p>
                </div>
                <input-suffix suffix="秒">
                  <el-input-number
                    style="width: 120px"
                    :controls="false"
                    v-int
                    v-model="maxNumQueueTime"
                    :min="1"
                    :max="600"
                    controls-position="right"
                    size="middle"
                  />
                </input-suffix>
              </div>
              <div class="card">
                <div>
                  <p class="card-title">最长振铃时间</p>
                  <p class="card-txt">
                    服务组分配呼叫到员工时每个员工最大的振铃时长，建议设置为20-30秒。超过此数值员工仍未接听，将会呼叫组内下一个空闲员工。
                  </p>
                </div>
                <input-suffix suffix="秒">
                  <el-input-number
                    style="width: 120px"
                    :controls="false"
                    v-int
                    v-model="longestRingTime"
                    :min="1"
                    :max="600"
                    controls-position="right"
                    size="middle"
                  />
                </input-suffix>
              </div>
              <div class="card">
                <div>
                  <p class="card-title">振铃未接不再分配</p>
                  <p class="card-txt">
                    一通呼叫在服务组最多分配20次，超过20次还未被接听系统将自动挂机。开启开关，员工振林拒接或振铃超时未接时，此呼叫将不再分配给此员工，将会呼叫组内下一个空闲员工。员工离线使用手机接听时建议开启，避免组内仅有一个员工离线手机接听，因为其他事务挂断次来电后还会重复分配给此员工。
                  </p>
                </div>
                <el-switch size="small" v-model="ringUnDispatch" />
              </div>
              <div class="card">
                <div>
                  <p class="card-title">启用播报工号</p>
                  <p class="card-txt">服务组分配呼叫到员工并接听时，客户侧会自动播报“XXX为您服务”。</p>
                </div>
                <el-switch size="small" v-model="broadcastJobNum" />
              </div>
              <div class="card">
                <div>
                  <p class="card-title">禁止转入通话</p>
                  <p class="card-txt">开启开关，任意员工在客服工作台操作转移或者咨询转移的时候，不可选择此服务组。</p>
                </div>
                <el-switch size="small" v-model="forbiddenCall" />
              </div>
              <div class="card flex-col">
                <section class="flex">
                  <div>
                    <p class="card-title">自定义排队等待音</p>
                    <p class="card-txt">自定义客户在服务组队列中排队时听到的等待音乐。默认使用系统排队等待音乐。</p>
                  </div>
                  <el-switch size="small" v-model="customizeMusic" />
                </section>
                <div v-if="customizeMusic" class="dividing noMargin"></div>
                <section v-if="customizeMusic">
                  <p>等待音乐</p>
                  <div class="flex no-justify">
                    <el-select-v2
                      style="width: 300px"
                      v-model="musicSetting.model"
                      :options="musicSetting.options"
                      placeholder="请选择音乐文件"
                    />
                    <span class="ml16">
                      <Audio
                        :row="{
                          url: musicSettingUrl
                        }"
                      />
                    </span>
                    <!-- <i class="MC_iconfont MC_icon-qiyong-kaishi ml10 primary-color fs20" /> -->
                    <el-button class="ml10" @click="onJump" link type="primary"> 配置语音库 </el-button>
                  </div>
                </section>
              </div>
              <div class="card flex-col">
                <section class="flex">
                  <div>
                    <p class="card-title">排队中提示</p>
                    <p class="card-txt">
                      客户在服务组队列中排队的时候播报给客户的提示。选择继续等待或播报排队位置，排队位置不变。
                    </p>
                  </div>
                  <el-switch size="small" v-model="queueTip" />
                </section>
                <div v-if="queueTip" class="dividing"></div>
                <section class="queueTip" v-if="queueTip">
                  <p class="noMP relative">
                    <el-radio label="位置播报" v-model="queueSetting.model" />
                    <span class="card-txt tip ml28"
                      >客户在队列中排队时，按照时间间隔播报客户当前排队位置，直至被听接或者溢出</span
                    >
                  </p>
                  <p class="noMP relative">
                    <el-radio label="继续等待询问" v-model="queueSetting.model" />
                    <span class="card-txt tip"
                      >客户在队列中排队时，按照时间间隔询问客户是否继续排队，客户按任意键推出排队，退出后的流向可在IVR语音导航-转人工节点的“超时”中配置</span
                    >
                  </p>
                  <div class="dividing"></div>
                  <div v-if="queueTipMapReverse[queueSetting.model] === 0">
                    <p class="item-title noMP voice-title">
                      播报间隔
                      <span class="voice-title-tip"
                        >最小间隔为15s，建议设置为30～60之间，过于频繁或过长影响客户体验</span
                      >
                    </p>
                    <input-suffix suffix="秒">
                      <el-input-number
                        style="width: 120px"
                        :controls="false"
                        v-int
                        v-model="queueSetting.time"
                        :min="0"
                        :max="99"
                        controls-position="right"
                        size="middle"
                      />
                    </input-suffix>
                  </div>
                  <div v-if="queueTipMapReverse[queueSetting.model] !== 0">
                    <section>
                      <p class="voice-title">提示音频</p>
                      <div class="flex no-justify">
                        <el-select-v2
                          style="width: 300px"
                          v-model="queueSetting.music.model"
                          :options="queueSetting.music.options"
                          placeholder="请选择音乐文件"
                        />
                        <span class="ml16">
                          <Audio
                            :row="{
                              url: queueMusicUrl
                            }"
                          />
                        </span>
                        <el-button class="ml10" @click="onJump" link type="primary"> 配置语音库 </el-button>
                      </div>
                    </section>
                    <section>
                      <div class="flex no-justify flex-col no-child-margin">
                        <p class="item-title voice-title">
                          播报间隔
                          <span class="voice-title-tip"
                            >最小间隔为15s，建议设置为30～60之间，过于频繁或过长影响客户体验</span
                          >
                        </p>
                        <input-suffix suffix="秒">
                          <el-input-number
                            style="width: 270px"
                            :controls="false"
                            v-int
                            v-model="queueSetting.waitTime"
                            :min="1"
                            :max="600"
                            controls-position="right"
                            size="middle"
                          />
                        </input-suffix>
                      </div>
                      <div class="flex no-justify flex-col no-child-margin">
                        <p class="item-title voice-title">
                          播放次数
                          <span class="voice-title-tip"
                            >超出询问次数后，客户退出排队，退出后的流向可以在IVR语音导航-转人工节点的“超时”中配置</span
                          >
                        </p>
                        <el-input-number
                          style="width: 300px"
                          class="tal"
                          :controls="false"
                          v-int
                          v-model="queueSetting.times"
                          :min="0"
                          :max="20"
                          controls-position="right"
                          size="middle"
                        />
                      </div>
                    </section>
                  </div>
                </section>
              </div>
            </div>
            <JumpMenu wrapperClass="wrapper" boxClass="call-center" titleClass="card-title" />
          </div>
        </section>
      </div>
    </div>
    <div class="btn-box">
      <el-button @click="goBack">取消</el-button>
      <el-button type="primary" @click="onSubmit" class="ml10">确定</el-button>
    </div>
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, reactive, ref, toRefs } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import GoBack from '@/common/components/go-back.vue'
import Audio from '@/common/components/audio/audio-operate.vue'
import { getQuery } from '@/common/utils/common'
import { int as vInt } from '@/app/base/directives/input-int'
import { ServiceGroupState as State, AllocationStrategy as Strategy } from './interface'
import JumpMenu from './jump-menu.vue'
import localforage from 'localforage'
import { GROUP_STORE_PRE } from '../index/constance'
import { FormRules } from 'element-plus'
import { cloneDeep, isEmpty, set, sortBy } from 'lodash'
import { addServiceGroup, updateServiceGroup } from '@/app/base/apis/staff'
import { commonStore } from '@/common/store/modules/common'
import mcGetCache from '@/common/utils/mc-get-cache'
import InputSuffix from '@/common/components/input-suffix.vue'

const commonModule = commonStore()

const queueTipMap: any = {
  0: '位置播报',
  1: '继续等待询问'
}
const queueTipMapReverse: any = {
  位置播报: 0,
  继续等待询问: 1
}

const rules = reactive<FormRules>({
  name: [{ required: true, message: '服务组名称必填', trigger: 'blur' }]
  // 'principal.model': [{ required: true, message: '负责人至少选择一位', trigger: 'change' }]
})
const formRef = ref(null)
const state: State = reactive({
  isEdit: false,
  product: {
    members: [],
    groupNumber: '',
    name: '',
    principal: {
      model: [],
      options: []
    },
    group: {
      model: [],
      options: []
    }
  },
  activeIndex: '0',
  allocationStrategy: Strategy.ZERO,
  noFreeStaff: true,
  maxNumQueue: 10,
  maxNumQueueTime: 30,
  longestRingTime: 30,
  ringUnDispatch: false,
  broadcastJobNum: false,
  forbiddenCall: true,
  customizeMusic: false,
  musicSetting: {
    model: 0,
    options: []
  },
  queueSetting: {
    model: queueTipMap['1'],
    // model: true,
    options: [],
    music: {
      model: 0,
      options: []
    },
    time: 15,
    waitTime: 15,
    times: 3
  },
  queueTip: false
})
const {
  isEdit,
  product,
  activeIndex,
  allocationStrategy,
  noFreeStaff,
  maxNumQueue,
  maxNumQueueTime,
  longestRingTime,
  ringUnDispatch,
  broadcastJobNum,
  forbiddenCall,
  customizeMusic,
  musicSetting,
  queueTip,
  queueSetting
} = toRefs(state)

const router = useRouter()

const localNode: any = ref({})

onMounted(async () => {
  await mcGetCache.$getCache('userCache', 'hasObj')
  await mcGetCache.$getCache('groupCache', 'hasObj')
  const node = await getLocalData()
  initData(node)
  setTimeout(() => getVoice())
})

const groupNameStyle: any = computed(() => ({
  width: state.product.groupNumber ? '48%' : 'calc(50% - 5px)',
  ...(state.product.groupNumber ? { position: 'relative', top: '8px' } : {})
}))

const musicSettingUrl = computed(
  () => state.musicSetting.options.find((i: any) => i.id === state.musicSetting.model)?.fileUrl
)

const queueMusicUrl = computed(
  () => state.queueSetting.music.options.find((i: any) => i.id === state.queueSetting.music.model)?.fileUrl
)

const getVoice = () => {
  mcGetCache.$getCache('voiceLibrary').then((res: any) => {
    const data = res.map((i: any) => ({ ...i, label: i.name, value: i.id }))
    const cloneData = cloneDeep(data).filter((i: any) => i.voiceType === 'moh')
    const filterData = data.filter((i: any) => i.voiceType === 'general_voice')
    state.musicSetting.options = cloneData
    if (!state.musicSetting.model) {
      state.musicSetting.model = cloneData[0]?.id
    }
    state.queueSetting.music.options = filterData
    if (!state.queueSetting.music.model) {
      state.queueSetting.music.model = filterData[0]?.id
    }
  })
}

const initData = (node: any) => {
  const { members = [] } = node || {}
  const userList = commonModule.publicCache.userCacheEnable.map((i: any) => ({
    ...i,
    label: `${i.agentName} [${i.agentNumber}]`,
    ...(members?.some((m: any) => m.agentId === i._id)
      ? { weight: members?.find((m: any) => m.agentId === i._id)?.weight, isRight: true }
      : {})
  }))
  state.product.principal.options = sortBy(userList, [(o: any) => +o.agentNumber])
  state.product.group.options = cloneDeep(userList)
}
const getLocalData = async () => {
  const query = getQuery()
  state.isEdit = !!query.id
  if (query.id) {
    const node: any = await localforage.getItem(`${GROUP_STORE_PRE}${query.id}`)
    localNode.value = node
    const { queueSetting, musicSetting, product, ...other } = cloneDeep(transOrigin(node))
    Object.assign(state, other)
    Object.assign(state.queueSetting, queueSetting)
    Object.assign(state.musicSetting, musicSetting)
    Object.assign(state.product, product)
    return node
  }
}

console.log(state)

const onTransfer = (keys: any[]) => {
  state.product.group.options.forEach((i: any) => {
    i.isRight = false
  })
  state.product.group.options.forEach((i: any) => {
    if (keys.includes(i._id)) {
      i.weight = i.weight || 0
      i.isRight = true
    }
  })
}

const filterMethod = (query: any, item: any) => {
  if (!query) {
    return true
  }
  return item?.agentNumber?.includes(query) || item?.agentName?.includes(query)
}
const goBack = () => {
  router.back()
}

const transOrigin = (data: any) => {
  const { callConfig = {}, groupLeader, members, name, parentId, groupNumber } = data
  console.log(data)
  const {
    assignStrategy,
    broadcastPositionInterval,
    continueWaitingInterval,
    continueWaitingTimes,
    continueWaitingVoice,
    customWaitingVoice,
    failedNotAssigned,
    forbidTransferIn,
    maxLimit,
    sayJobNumber,
    timeOut,
    userFreeTransfer,
    waitTime,
    waitingReminded,
    waitingRemindedType,
    customWaitingVoiceSwitch
  } = callConfig
  const userList = commonModule.publicCache.userCache.map((i: any) => ({
    ...i,
    label: `${i.agentName} [${i.agentNumber}]`
  }))
  return {
    allocationStrategy: assignStrategy,
    queueTip: waitingReminded,
    customizeMusic: customWaitingVoiceSwitch,
    ringUnDispatch: failedNotAssigned,
    broadcastJobNum: sayJobNumber,
    maxNumQueue: maxLimit,
    maxNumQueueTime: waitTime,
    longestRingTime: timeOut,
    noFreeStaff: userFreeTransfer,
    queueSetting: {
      time: broadcastPositionInterval,
      waitTime: continueWaitingInterval,
      times: continueWaitingTimes,
      music: {
        model: continueWaitingVoice,
        options: [
          { value: 0, label: '音频文件1' },
          { value: 1, label: '音频文件2' }
        ]
      },
      forbiddenCall: forbidTransferIn,
      model: waitingRemindedType === 'continueWaitingReminded' ? '继续等待询问' : '位置播报'
    },
    musicSetting: {
      model: customWaitingVoice,
      options: []
    },
    product: {
      groupNumber,
      principal: {
        model: groupLeader,
        options: userList
      },
      group: {
        model: members.map((i: any) => i.agentId),
        options: userList
      },
      name,
      parentId
    }
  }
}

const transform = () => {
  const query = getQuery()
  const level = +query.level
  const parentId = query.parentId
  const { groupNumber } = localNode.value || {}
  return {
    callConfig: {
      assignStrategy: state.allocationStrategy,
      broadcastPositionInterval: state.queueSetting.time,
      continueWaitingInterval: state.queueSetting.waitTime,
      continueWaitingTimes: state.queueSetting.times,
      continueWaitingVoice: state.queueSetting.music.model,
      customWaitingVoice: state.musicSetting.model,
      failedNotAssigned: state.ringUnDispatch,
      forbidTransferIn: state.forbiddenCall,
      maxLimit: state.maxNumQueue,
      sayJobNumber: state.broadcastJobNum,
      timeOut: state.longestRingTime,
      userFreeTransfer: state.noFreeStaff,
      waitTime: state.maxNumQueueTime,
      waitingReminded: state.queueTip,
      customWaitingVoiceSwitch: state.customizeMusic,
      waitingRemindedType:
        state.queueSetting.model === '继续等待询问' ? 'continueWaitingReminded' : 'broadcastWaitingPosition'
    },
    groupLeader: state.product.principal.model,
    level: level < 1 ? 1 : level,
    members: state.product.group.options
      .filter((i: any) => state.product.group.model.includes(i._id))
      .map((i: any) => ({
        agentId: i._id,
        weight: +i.weight || 0
      })),
    name: state.product.name,
    parentId: parentId === 'undefined' ? '0' : parentId,
    ...(groupNumber ? { groupNumber } : {})
  }
}
const onSubmit = async () => {
  if (!formRef.value) {
    return
  }
  await (formRef.value as any).validate(async (valid: any, fields: any) => {
    if (valid) {
      const _id = getQuery().id
      const data = transform()
      const params = {
        ...(_id ? { _id } : {}),
        ...data
      }
      await (_id ? updateServiceGroup : addServiceGroup)(params)
      ElMessage.success('保存成功')
      mcGetCache.$getCache('groupCache', 'hasObj', '', 'formServer')
      if (_id) {
        localforage.setItem(`${GROUP_STORE_PRE}${_id}`, params)
      }
      router.back()
    } else {
      console.log('error submit!', fields)
    }
  })
}
const onJump = () => {
  router.push('/app/call_router/voice-library')
}
</script>
<style lang="stylus" scoped>
.wrapper
  height: 90vh;
  overflow-y: scroll;
  :deep(.el-form-item)
   margin-bottom 0
.tal
  :deep(.el-input__inner)
    text-align left
.relative
  position relative
  .tip
    font-size 12px
.ml28
  margin-left: 28px;
.voice-title
  margin-bottom 8px !important
  font-weight: 500 !important;
  color: rgba(0, 0, 0, 0.6) !important;
.voice-title-tip
  font-size 12px
  color rgba(0, 0, 0, 0.38)
  margin-left 8px
.no-child-margin
  p
   margin 0
   color rgba(0, 0, 0, 0.6)
.card-title
  margin: 0;
.radio-group
  display flex
  flex-direction: column;
  align-items: unset;
  :deep(.el-radio__label)
    display: flex;
    align-items: center;
    width: 24vw;
  :deep(.el-radio__label) span
    width 200px
    margin-top 0
.no-justify
  justify-content unset !important

.primary-color
  color var(--el-color-primary-dark)
.noMargin
  margin 0 !important
.input-number
  :deep(.el-input)
    width 150px
.weight
  width: 40px;
  margin-left: 10px;
  position: absolute;
  right: 2px;
  top: 3px;
  :deep(.el-input__wrapper)
    height: 25px !important;
.box
  padding 12px
  margin-bottom: 50px;
  border-bottom 1px solid var(--el-disabled-border-color)
.call-center-wrapper
  display flex
  margin-top 10px
.call-center
  width: 85%
.mt27
  margin-top: 27px;
.transfer
  :deep(.el-checkbox__label)
    overflow: unset;
    display: flex;
    position: relative;
    width: 170px;
  :deep(.el-transfer-panel .el-transfer-panel__header)
    background: linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF;
  :deep(.el-transfer-panel__filter .el-input__wrapper)
    border-radius: 18px;
  :deep(.el-transfer-panel .el-checkbox__label)
    font-size 14px
.flex-col
.item
  margin-top 16px
  :deep(.el-transfer__button:nth-child(1))
    display block
  :deep(.el-transfer__button:nth-child(2))
   margin-top 20px
   margin-left 0
  :deep(.el-menu-item)
   height: 40px;
   padding: 20px 0;
  :deep(.el-select-v2__input-wrapper)
    width 100px !important
  :deep(.el-transfer-panel__filter .el-input__inner)
    padding-left 2px
.section-title
  height: 36px;
  display: flex;
  box-sizing: border-box;
  align-items: center;
  padding: 8px 20px;
  border-radius: 4px;
  font-weight: 500;
  font-size: 14px;
  color: var(--el-overlay-color);
  background: linear-gradient(0deg, rgba(30, 99, 245, 0.1), rgba(30, 99, 245, 0.1)), #FFFFFF;
.require::before
  content '*',
  font-size 10px
  color var(--el-color-success)
  position relative
  top 5px
.item-box
  padding-top 16px

.card-txt
  font-size 12px
  color rgba(0, 0, 0, 0.6)
  margin-right 20px
  line-height: 24px;
  margin-bottom: 0;
  margin-top: 8px;

.only-flex
  display flex
  align-items center
.no-l-padding
  padding-left 0
  margin-bottom: 0 !important
.flex
 display flex
 justify-content space-between
 align-items center
 :deep(.el-select-v2)
   width 190px
.card
  border 1px solid var(--el-disabled-border-color)
  border-radius 4px
  padding: 16px;
  margin-bottom 20px
  display: flex;
  align-items: center;
  justify-content: space-between;
.flex-col
  flex-direction column
  align-items unset
.dividing
  width 100%
  height 1px
  background var(--el-disabled-border-color)
  margin: 11px 0;
.card-title, .item-title
  font-weight 500
  color: var(--el-overlay-color)
.card-text
  color var(--el-mask-color-extra-light)
.btn-box
  height: 60px;
  line-height: 60px;
  text-align: right;
  padding: 0 14px;
  position: fixed;
  bottom: 0;
  right: 0;
  left: 265px;
  padding-right: 30px;
.ml10
  margin-left 10px
.mt16
  margin-top 16px
.fs20
  font-size 20px
.tip-icon
  color rgba(0, 0, 0, 0.38)
.noBM
  margin-bottom 0
.noMP
  margin 0
  padding 0
.ml16
  margin-left 16px
.transfer-label
  display: inline-block;
  width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
.mb24
  margin-bottom 24px
</style>
